<script setup>
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { Search } from '@element-plus/icons-vue'
import { getSubjectListAPI, getRecordListAPI } from '@/api/paper.js'
import { formatDate } from '@/utils/format.js'

const router = useRouter()
const recordSearch = ref({
  subjectId: '',
  keyword: '',
  paperType: '',
  pageIndex: 1,
  pageSize: 10
})

// 考试记录
const recordList = ref([])
const recordTotal = ref(0)
const getRecordList = async () => {
  const { data: res } = await getRecordListAPI(recordSearch.value)
  if (res.status === 200) {
    recordList.value = res.data
    recordTotal.value = res.total
  }
}
getRecordList()

// 学科列表
const subjectList = ref([])
const getSubjectList = async () => {
  const { data: res } = await getSubjectListAPI()
  if (res.status === 200) {
    subjectList.value = res.data
  }
}
getSubjectList()

// 切换试卷类型
const tabItemClick = (e) => {
  document.querySelector('.active').classList.remove('active')
  e.target.classList.add('active')
  recordSearch.value.paperType = e.target.name
  getRecordList()
}

// 换页
const pageChange = (page) => {
  recordSearch.value.pageIndex = page
  getRecordList()
  window.scrollTo(0, 0)
}

// 查看试卷
const gotoInfo = (id) => {
  router.push(`/record/${id}`)
}
</script>

<template>
  <div class="record-container">
    <div class="record-header">
      <div class="record-header-tab">
        <span class="record-header-tab-text">试卷类型：</span>
        <div class="record-header-tab-item-box">
          <button
            class="record-header-tab-item active"
            name=""
            @click="tabItemClick"
          >
            全部
          </button>
          <button class="record-header-tab-item" name="1" @click="tabItemClick">
            固定试卷
          </button>
          <button class="record-header-tab-item" name="4" @click="tabItemClick">
            时段试卷
          </button>
        </div>
      </div>
      <div class="record-header-select-box">
        <div class="record-header-select-search">
          <el-input
            :prefix-icon="Search"
            placeholder="请输入搜索关键字"
            size="large"
            v-model="recordSearch.keyword"
            clearable
            @change="getRecordList()"
          ></el-input>
        </div>
        <div class="record-header-select">
          <el-select
            v-model="recordSearch.subjectId"
            placeholder="请选择学科"
            size="large"
            clearable
            @change="getRecordList()"
          >
            <el-option
              v-for="item in subjectList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </div>
      </div>
    </div>
    <div class="record-content" v-if="recordList.length > 0">
      <el-card
        class="record-content-item"
        v-for="item in recordList"
        :key="item.id"
        shadow="hover"
      >
        <div class="item-left">
          <div class="titleBox">
            <h4>{{ item.paper_name }}</h4>
            <div>
              <span class="item-left-text">提交时间：</span>
              {{ formatDate(item.create_time, 'YYYY-MM-DD HH:mm:ss') }}
            </div>
            <div>
              <span class="item-left-text">试卷状态：</span>
              <el-tag :type="item.status ? 'success' : 'warning'">{{
                item.status ? '已批改' : '未批改'
              }}</el-tag>
            </div>
            <div>
              <span class="item-left-text"></span>
            </div>
            <div>
              <span class="item-left-text"></span>
            </div>
          </div>
          <div class="detailBox">
            <div>
              <span class="item-left-text">试卷类型：</span>
              {{ item.paper_type }}
            </div>
            <div>
              <span class="item-left-text">学科：</span>
              {{ item.subject_name }}
            </div>
            <div>
              <span class="item-left-text">题目数量：</span>
              {{ item.question_count }}
            </div>
            <div>
              <span class="item-left-text">试卷总分：</span>
              {{ item.paper_score }}
            </div>
            <div>
              <span class="item-left-text">发布时间：</span>
              {{
                formatDate(item.exam_paper_create_time, 'YYYY-MM-DD hh:mm:ss')
              }}
            </div>
          </div>
          <div class="scoreBox">
            <div>
              <span class="item-left-text">正确题数：</span>
              {{ item.question_correct }}
            </div>
            <div>
              <span class="item-left-text">系统批改：</span>
              {{ item.system_score }}
            </div>
            <div>
              <span class="item-left-text">最终得分：</span>
              {{ item.user_score === null ? '待批改' : item.user_score }}
            </div>
            <div>
              <span class="item-left-text">做题时间：</span>
              {{ item.do_time }} 分钟
            </div>
            <div>
              <span class="item-left-text">做题人：</span>
              {{ item.answer_user }}
            </div>
          </div>
        </div>
        <div class="item-right">
          <el-button type="primary" @click="gotoInfo(item.id)"
            >查看试卷</el-button
          >
        </div>
      </el-card>
    </div>
    <el-empty
      v-else
      description="暂无记录"
      style="min-height: 3.2rem"
    ></el-empty>
    <el-pagination
      layout="prev, pager, next, jumper,total"
      :total="recordTotal"
      :page-size="recordSearch.pageSize"
      prev-text="上一页"
      next-text="下一页"
      @current-change="pageChange"
    />
  </div>
</template>

<style lang="scss" scoped>
@media screen and (max-width: 1024px) {
  .record-container {
    margin: 0.2rem 0.6rem;
    .record-header {
      flex-direction: column;
      align-items: flex-start !important;
      padding-bottom: 0.14rem;
      .record-header-tab {
        margin-bottom: 0.14rem;
      }
      .record-header-select-box {
        display: flex;
        width: 100%;
        // flex-direction: column;
        .record-header-select-search {
          flex: 1;
          max-height: 0.5rem;
          margin-bottom: 0.1rem;
          :deep(.el-input--large .el-input__wrapper) {
            padding: 0.01rem 0.15rem;
            font-size: 0.14rem;
          }
        }
        .record-header-select {
          flex: 1;
          max-height: 0.4rem;
          :deep(.el-select--large .el-select__wrapper) {
            padding: 0.08rem 0.16rem;
            font-size: 0.14rem;
          }
        }
      }
    }

    .el-pagination {
      justify-content: flex-end;
      &:deep(.el-icon) {
        font-size: 1.5rem;
      }
      &:deep(.el-pager) {
        .number {
          font-size: 0.16rem;
          width: 0.4rem;
          height: 0.4rem;
        }
      }
    }
  }
}
.record-container {
  margin: 0.2rem 0.6rem;
  .record-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 0.14rem;
    margin-bottom: 0.2rem;
    border-bottom: 0.01rem solid #e1e1e1;
    .record-header-tab {
      display: flex;
      align-items: center;
      flex: 3;
      .record-header-tab-text {
        font-size: 0.14rem;
      }
      .record-header-tab-item-box {
        display: flex;
        .record-header-tab-item {
          margin-right: 0.2rem;
          padding: 0.06rem;
          cursor: pointer;
          border: 0;
          background-color: transparent;
          border-radius: 0.06rem;
          font-size: 0.14rem;
          &.active {
            background-color: #409eff;
            color: #fff;
          }
        }
      }
    }
    .record-header-select-box {
      display: flex;
      flex: 1;
      .record-header-select-search {
        margin-right: 0.1rem;
        display: flex;
        flex: 1;
      }
      .record-header-select {
        flex: 1;
        display: flex;
      }
    }
  }

  .record-content {
    min-height: 3.2rem;
    padding: 0.2rem;
    font-size: 0.16rem;
    .record-content-item {
      margin-bottom: 0.2rem;
      &:deep(.el-card__body) {
        min-height: 1.8rem;
        display: flex;
        justify-content: space-between;
        .item-left {
          display: flex;
          justify-content: space-between;
          font-size: 0.14rem;
          .titleBox,
          .detailBox,
          .scoreBox {
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            margin-right: 0.1rem;
          }

          .item-left-text {
            font-size: 0.14rem;
            color: #989898;
            display: inline-block;
            width: 0.7rem;
            text-align-last: justify;
          }
        }
        .item-right {
          display: flex;
          justify-content: flex-end;
        }
      }
    }
  }
  .el-pagination {
    justify-content: flex-end;
    &:deep(.el-icon) {
      font-size: 0.24rem;
    }
    &:deep(.el-pager) {
      .number {
        font-size: 0.16rem;
        width: 0.4rem;
        height: 0.4rem;
      }
    }
  }
}
</style>
